<template>
	<view style="width: 100%;">
		<view class="index-container">
			<scroll-view scroll-x="true" style="width: 100%;">
				<view class="nav-tabs justify-start align-center">
						<view @click="onCat(item.category_id, index)" v-if="categoryList" :class="{'tab-item':true,'active':index==checkCat}" v-for="(item,index) in categoryList.data" :key="index" style="margin:5px 10px;flex-shrink: 0;">
							{{item.cat_name}}
						</view>
				</view>
			</scroll-view>
			<view class="swiper-container">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#ffffff"
					indicator-active-color="#f69316" circular>
					<swiper-item v-if="bannerList" v-for="(item,index) in bannerList.data" :key="index">
						<view class="swiper-item" @click="nav(item.url)">
							<image :src="baseURL+'/'+item.src_img" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="category-container justify-between align-center" style="width: 70%;margin: 10px auto;">
				<view @click="nav('/pages/opera/video/list?type=排行')" class="flex-1 flex align-center justify-center">
					<view class="cate-item justify-center flex-col align-center">
						<text class="myicon icon-first" style="color: #f3711b;font-size: 18px;"></text>
						<view class="" style="margin-top: 2px;">
							排行
						</view>
					</view>
				</view>
				<view @click="nav('/pages/opera/video/list?type=最新')" class="flex-1 flex align-center justify-center">
					<view class="cate-item justify-center flex-col align-center">
						<text class="myicon icon-zuixin" style="color: #53d4f3;font-size: 18px;"></text>
						<view class="" style="margin-top: 2px;">
							最新
						</view>
					</view>
				</view>
			</view>
			<view class="grid-container" v-if="operaList&&operaList.total">
				<view  class="grid-item" v-for="(item,index) in operaList.data" :key="index">
					<image @click="nav('/pages/opera/video/play?opera_id='+item.opera_id)" :src="baseURL+'/'+item.logo_img" mode="aspectFill"></image>
					<view class="justify-between align-center">
						<text @click="nav('/pages/opera/video/play?opera_id='+item.opera_id)" class="item-title">{{ item.name }}</text>
						<text v-if="item.opera_focus_info" @click.stop="favour(item)" class="myicon icon-31shoucangxuanzhong text-color" ></text>
						<text v-else @click.stop="favour(item)" class="myicon icon-shoucang text-color" ></text>
					</view>
				</view>
			</view>
			<view style="width: 100%;" class="justify-center" v-else>
				<Empty tips_text="暂无剧场"></Empty>
			</view>
		
			<LastView ref="last-view"></LastView>
		</view>
		
		<view :style="{height:`${constant.bottom_bar_height}px`}">
			<BottomBar v-model='barIndex'  :barlists="barlists"/>
		</view>
	</view>
</template>

<script>
	import LastView from '@/pages/opera/components/LastView.vue'
	import config from '@/pages/opera/config.js'
	
	export default {
		components:{
			LastView,
		},
		data() {
			return {
				constant:this.constant,
				baseURL:this.baseURL,
				barIndex:1,
				barlists:config.barlists,
				bannerList:null,
				categoryList:null,
				checkCat:0,
				user_id:uni.getStorageSync('user_id'),
				operaList: null
			}
		},
		onShareAppMessage(res) {
			let path = '/pages/index/index?share_id='+this.user_id
			console.log('path',path)
			return {
			  title: '邀请您观看各种好剧！',
			  path,
			}
		},
		onLoad() {
				this.get('crud/list',{table:'banner' }).then(({code,paginate})=>{
					if(code==1){
						this.bannerList=paginate
					}
				})
				this.get('crud/list',{table:'category'}).then(({code,paginate})=>{
					if(code==1){
						this.categoryList=paginate
					}
				})
				this.getData()
		},
		methods: {
			getData(){
				this.get('crud/list',{table:'opera', limit: 50}).then(({code,paginate})=>{
					if(code==1){
						this.operaList=paginate
					}
				})
			},
			goDetail(operaId){
				console.log(operaId)
				uni.navigateTo({
					url:"/pages/opera/video/list?category_id="+operaId
				})
			},
			onCat(categoryId, index){
				this.checkCat = index
				this.get('crud/list',{table:'opera', limit: 12, category_id: categoryId}).then(({code,paginate})=>{
					if(code==1){
						this.operaList=paginate
					}
				})
			},
			favour(item){
				this.get('crud/save',{table:'opera_focus', user_id:this.user_id, opera_id:item.opera_id}).then(({code,msg})=>{
					if(code==1){
						this.error(msg)
						this.getData();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.index-container {
		padding: 0rpx 24rpx;

		.tab-item {
			font-size: 28rpx;
			color: #333333;

			&.active {
				color: #f69316;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					bottom: -10rpx;
					width: 100%;
					height: 5rpx;
					background: #f69316;
				}
			}
		}

		.swiper-container {
			margin-top: 32rpx;
			width: 702rpx;
			height: 300rpx;
			border-radius: 16rpx;
			overflow: hidden;

			image {
				width: 702rpx;
				height: 300rpx;
			}
		}

		.category-container {
			margin: 24rpx 0rpx;

			.cate-item {
				font-size: 28rpx;
				color: #666666;

				image {
					width: 58rpx;
					height: 58rpx;
				}
			}
		}

		.grid-container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-row-gap: 24rpx;
			grid-column-gap: 24rpx;

			.grid-item {
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0rpx 4rpx 8rpx #dedede;

				image {
					width: 339rpx;
					height: 508rpx;
				}

				.item-title {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					padding: 0rpx 10rpx;
					line-height: 60rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>